<script lang="ts" setup>

import {type Permission} from './formType';
import {onMounted, ref} from "vue";
import {PERMISSION_LIST} from "@/api/permission";
import myForm from "@/views/permission/form.vue"

const tableData = ref<Permission[]>()
const child = ref()
const handleEdit = (row: Permission) => {
  child.value.openDialog(row)
}
onMounted(async () => {
  let {data} = await PERMISSION_LIST()
  tableData.value = data
})
</script>

<template>
  <div class="permission-extra">
    <el-button type="primary" @click="handleEdit">添加</el-button>
  </div>

  <el-table
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
  >
    <el-table-column prop="name" label="Name" />
    <el-table-column prop="slug" label="标识" />
    <el-table-column align="center" label="操作">
      <template #default="scope">
        <el-button  size="small" @click="handleEdit(scope.row)">
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
        >
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <my-form ref="child" :api="{}"></my-form>
</template>

<style scoped>
.permission-extra {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}
</style>